<template>
  <div>
    <div class="top-bg" >
      <div class="item">
        <div class="first mr-10">咖啡豆名称:</div>
        <el-input placeholder="请输入咖啡豆名称" clearable maxlength="50" v-model="params.bean"></el-input>
      </div>
      <div class="item">
        <div class="first mr-10">开始时间:</div>
        <el-date-picker
            v-model="params.startTime"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div class="item">
        <div class="first mr-10">结束时间:</div>
        <el-date-picker
            v-model="params.endTime"
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div class="item">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetClick">重置</el-button>
        <!--        <el-button @click="choseDishExcel">导入商品列表</el-button>-->
      </div>
    </div>
    <el-table :data="dataList"  stripe style="width: 100%;" border :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="goodsName" label="商品名称"></el-table-column>
      <el-table-column prop="bean" label="咖啡豆编码"></el-table-column>
      <el-table-column prop="beanName" label="咖啡豆名称"></el-table-column>
      <el-table-column prop="weight" label="重量(克)">
        <template scope="scope">
          {{ scope.row.weight !== '0.00' ? scope.row.weight : '-' }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                   :current-page="params.page" :page-sizes="[10, 20, 30, 50]" :page-size="params.pageSize"
                   :layout="params.total<10?'->,total':'->,total, sizes, prev, pager, next, jumper'" :total="params.total">
    </el-pagination>
  </div>
</template>

<script>
import {KAFEE_GET_BEANS_DATA, KAFEE_GET_GOODS_LIST} from "@/assets/const/api";
function getCurrentDate() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
export default {
  name: 'beansData',
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
      dataList:[],
      params:{
        current:1,
        size:10,
        total:0,
        bean:'',
        startTime: getCurrentDate(), // 新增开始时间参数
        endTime: getCurrentDate()    // 新增结束时间参数
      },
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getData();
  },
  methods: {
    resetData(){
      const currentDate = getCurrentDate();
      this.params = {
        current: 1,
        size:10,
        total:0,
        bean: '',
        startTime: currentDate, // 重置开始时间
        endTime: currentDate    // 重置结束时间
      }
    },
    resetClick(){
      this.resetData()
      this.getData()
    },
    handleSearch(){
      this.params.current = 1;
      this.getData()
    },
    getData(){
      this.$http.get(KAFEE_GET_BEANS_DATA,this.params).then(res => {
        this.dataList = res.data||[];
        this.params.total = res.data.total||0;
      });
    },
    handleCurrentChange(val){
      this.params.current = val
      this.getData()
    },
    handleSizeChange(val){
      this.params.size = val  // 修复之前的参数名错误
      this.getData()
    },
  }
}
</script>

<style scoped lang="scss">
.top-bg{
  background-color: #f9f9f9;
  border: 1px solid #ebeef5;
  min-height: 60px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  display: flex;
  align-items: center;
  .item{
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 18px;
    flex-shrink: 0;

  }
  .first{
    min-width: 100px;
    text-align: right;
  }
}
</style>